<template>
  <el-row>
    <el-col :span="16" :offset="4">
      <el-form  ref="form" :rules="rules" :model="actorList" label-position="right" label-width="100px">
        <el-form-item label="演员名称" prop="actorName">
          <el-input v-model="actorList.actorName"></el-input>
        </el-form-item >
        <el-form-item label="演员介绍" prop="profile"  >
          <el-input type="textarea" v-model="actorList.profile" :rows="2" maxlength="50" show-word-limit placeholder="请输入演员介绍"></el-input>
        </el-form-item>
        <el-form-item label="生日" prop="birthday" >
          <el-date-picker
            v-model="actorList.birthday" format="yyyy年MM月dd日" value-format="yyyy-MM-dd" >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="性别" prop="sex" >
          <el-select v-model="actorList.sex">
            <el-option v-for="item in sexList" :key="item.label" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="演员照片" prop="images">
          <el-upload
            :action="uploadPath"
            list-type="picture-card" :headers="uploadHeader" :before-upload="beforeUpload" :on-success="uploadSuccess" ref="pictureUpload" :file-list="fileList">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}" >
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
              <span class="el-upload-list__item-actions">
        <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
          <i class="el-icon-zoom-in"></i>
        </span>
        <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
          <i class="el-icon-delete"></i>
        </span>
      </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button type="warning" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
const initActor = {
  actorId: '',
  actorName: '',
  sex: '',
  birthday: '',
  profile: '',
  images: []
}
export default {
  name: 'ActorEdit',
  data () {
    return {
      fileList: [],
      fileInfo: [],
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      actorList: { ...initActor },
      sexList: [{
        value: 0,
        label: '女'
      }, {
        value: 1,
        label: '男'
      }, {
        value: 2,
        label: '未知'
      }],
      rules: {
        actorName: [{ required: true, message: '请输入演员姓名', trigger: 'blur' }],
        sex: [{ required: true, message: '请选择演员性别', trigger: 'change' }],
        birthday: [{ required: true, message: '请选择演员生日', trigger: 'change' }],
        profile: [{ required: true, message: '请输入演员介绍', trigger: 'blur' }],
        images: [{ required: true, message: '请选择图片', trigger: 'change' }]
      },
      uploadHeader: {
        token: ''
      },
      uploadPath: process.env.VUE_APP_BASE_API + '/upload'
    }
  },
  methods: {
    handleRemove (file) {
      this.$confirm('您确定要移除吗?', '询问').then(() => {
        this.$refs.pictureUpload.handleRemove(file)
      }).then(() => {
        for (let i = 0; i < this.fileInfo.length; i++) {
          if (file.name === this.fileInfo[i]) {
            this.fileInfo.splice(i, 1)
          }
        }
      })
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    beforeUpload (file) {
      const isImage = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isImage) {
        this.$message.error('文件格式不正确')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('图片大小不能超过2M')
      }
      return isImage && isLt2M
    },
    uploadSuccess (data) {
      if (data.code === 200) {
        this.fileInfo.push(data.data)
        this.fileList = this.fileInfo.map(item => {
          return {
            name: item,
            url: `${process.env.VUE_APP_BASE_API}/img/${item}`
          }
        })
      }
    },
    onSubmit () {
      this.actorList.images = this.fileInfo
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$axios.post('/sys/actor/update', this.actorList).then(({ data }) => {
            if (data.code === 200) {
              this.$alert('保存成功').then(() => {
                this.onReset()
                this.$router.push('/Actor')
              })
            } else {
              this.$confirm(data.msg)
            }
          })
        } else {
          this.$alert('表单填写不完整')
        }
      })
    },
    onReset () {
      this.actorList = { ...initActor }
      this.$refs.pictureUpload.clearFiles()
    },
    init () {
      if (this.$route.query.actorId) {
        this.$http.get('/sys/actor/info/' + this.$route.query.actorId).then(({ data }) => {
          if (data.code === 200) {
            const actor = data.data.actor
            const image = data.data.imageList
            this.fileList = image.map(item => {
              return {
                name: item.imageSrc,
                url: `${process.env.VUE_APP_BASE_API}/img/${item.imageSrc}`
              }
            })
            for (let i = 0; i < this.fileList.length; i++) {
              this.fileInfo.push(this.fileList[i].name)
            }
            this.actorList = {
              actorId: actor.actorId,
              actorName: actor.actorName,
              sex: actor.sex,
              birthday: actor.birthday,
              profile: actor.profile,
              images: this.fileInfo
            }
          } else {
            this.$confirm(data.msg)
          }
        })
      }
    }
  },
  created () {
    this.init()
    this.uploadHeader.token = this.$cookies.get('token')
  }
}
</script>

<style scoped>

</style>
